<template>
  <div class="box">
    <div class="loginBox">
      <h3>登录页面</h3>
      <h4>测试</h4>
      <el-form
        :model="loginForm"
        ref="loginform"
        :rules="rules"
      >
        <el-form-item prop="uname">
          <el-input
            v-model="loginForm.uname"
            prefix-icon="el-icon-user"
            placeholder="请输入用户名"
          ></el-input>
        </el-form-item>
        <el-form-item label="" prop="psd">
          <el-input
            v-model="loginForm.psd"
            prefix-icon="iconfont icon-3702mima"
            placeholder="请输入密码"
            show-password
          ></el-input>
        </el-form-item>
        <el-row class="fr">
          <el-button type="primary" @click="resMain">登录</el-button>
          <el-button type="info" @click="resForm">重置</el-button>
        </el-row>
      </el-form>
    </div>
  </div>
</template>

<script>
export default {
  components: {},
  data() {
    return {
      loginForm: {
        uname: "",
        psd: "",
      },
      rules: {
        uname: [
          { required: true, message: "请输入用户名", trigger: "blur" },
          { min: 3, max: 8, message: "长度在 3 到 8 个字符", trigger: "blur" },
        ],
        psd: [
          { required: true, message: "请输入密码", trigger: "blur" },
          {
            min: 6,
            max: 16,
            message: "长度在 6 到 16 个字符",
            trigger: "blur",
          },
        ],
      },
    };
  },
  created() {},
  mounted() {},
  watch: {},
  computed: {},
  methods: {
    resForm() {
        console.log(this);
      this.$refs.loginform.resetFields();
    },
    resMain() {
      // console.log(this);
      this.$refs.loginform.validate((val) => {
        // console.log(val);
        if(!val){
            return this.$message.error("登录失败");
        }

        this.$axios.post("http://127.0.0.1:8888/api/private/v1/login",{
            username:this.loginForm.uname,
            password:this.loginForm.psd,
        }).then((value)=>{
            // console.log(value.data);
            if(value.data.meta.status!=200){
                return this.$message.error("用户名或密码输入错误");
            }

            if(value.data.meta.status==200){
                window.sessionStorage.setItem("token",value.data.data.token)
                this.$router.push("/Main");
            }
        })
      });
    },
  },
};
</script>
<style lang="css" scoped>
.box {
  height: 100%;
  background-color: #4d4d4d;
}
.loginBox {
  width: 500px;
  background-color: white;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 40px;
  box-sizing: border-box;
}
.loginBox h3 {
  margin: 20px 0;
}
.fr {
  display: flex;
  justify-content: flex-end;
}
</style>